import Taro, { Component } from '@tarojs/taro'
import classNames from 'classnames'
import PropsType from 'prop-types'
import { View } from '@tarojs/components'
import { AtButton, AtModal } from 'taro-ui'
import '../styles/buttonmodal.scss'

class DButtonModal extends Component {

    constructor() {
        super(...arguments)
        this.state = {
            isOpened: false
        }
    }

    componentWillMount() {
        const { isOpened = false } = this.props
        this.setState({
            isOpened
        })
    }

    handleClose() {
        this.setState({
            isOpened: false
        })
    }

    handleCancel() {
        this.setState({
            isOpened: false
        })
    }
    handleConfirm() {
        this.setState({
            isOpened: false
        }, () => {
            this.props.handleConfirm && this.props.handleConfirm()
        })
    }

    onBtnHandle() {
        let { isOpened } = this.state
        if (isOpened) {
            return
        }
        this.setState({
            isOpened: true
        }, () => {
            this.props.onBtnHandle && this.props.onBtnHandle()
        })
    }

    render() {
        const {
            className,
            text,
            title,
            cancelText,
            confirmText,
            content,
            defaultBtn,
            primanyBtn,
            cancelBtn,
            radius
        } = this.props
        const {
            isOpened
        } = this.state
        const _objBtn = {
            defaultBtn: defaultBtn ? 'b_buttonmodal__btn-deault' : '',
            primanyBtn: primanyBtn ? 'b_buttonmodal__btn-primany' : '',
            cancelBtn: cancelBtn ? 'b_buttonmodal__btn-cancel' : ''
        }
        const _objStyle = radius ? `border-radius:${radius}px` : ''
        return (
            <View className={classNames('b_buttonmodal', className)}>
                {
                    text && <AtButton customStyle={_objStyle} className={classNames('b_buttonmodal__btn', ...Object.values(_objBtn))} onClick={this.onBtnHandle.bind(this)}>{text}</AtButton>
                }
                <AtModal isOpened={isOpened}
                    title={title}
                    cancelText={cancelText}
                    confirmText={confirmText}
                    onClose={this.handleClose.bind(this)}
                    onCancel={this.handleCancel.bind(this)}
                    onConfirm={this.handleConfirm.bind(this)}
                    content={content}>
                </AtModal>
            </View>
        )
    }

}

DButtonModal.defaultProps = {
    className: '',
    text: '按钮1',
    isOpened: false,
    title: '测试标题',
    cancelText: '取消',
    confirmText: '确定',
    content: '测试内容信息',
    defaultBtn: true,
    primanyBtn: false,
    cancelBtn: false,
    radius: 0
}

DButtonModal.PropsType = {
    className: PropsType.oneOfType[PropsType.string, PropsType.object],
    text: PropsType.string,
    isOpened: PropsType.bool,
    title: PropsType.string,
    cancelText: PropsType.string,
    confirmText: PropsType.string,
    content: PropsType.string,
    defaultBtn: PropsType.bool,
    primanyBtn: PropsType.bool,
    cancelBtn: PropsType.bool,
    radius: PropsType.number
}


export default DButtonModal
